<template>
  <el-container>
    <!--头部-->
    <el-header style="min-height: 190px">
      <v-head></v-head>
    </el-header>
    <el-main>
      <el-row>
        <!--左边-->
        <el-col :span="3" :offset="2">
          <div class="left_content" v-for="item in parMenuList" :key="item.id">
            <a href="javascript:" @click="toPage(item.menuId)" class="el-button"
              >{{item.menuName}}</a
            >
            <!-- <a href="javascript:" @click="toPage(3)" class="el-button"
              >党政领导</a
            >
            <a href="javascript:" @click="toPage(4)" class="el-button"
              >机构设置</a
            > -->
          </div>
        </el-col>
        <el-col :span="15" :offset="1">
          <div class="right_content">
            <div class="right_top">
              <el-row>
                <el-col :span="4"
                  ><span
                    ><b>{{ menuName }}</b></span
                  ></el-col
                >
                <el-col :span="2" :offset="16">
                  <a href="javascript:history.back(-1)"
                    >返回<i class="el-icon-back"></i
                  ></a>
                </el-col>
              </el-row>
            </div>
            <el-table
              :data="tableData"
              style="width: 100%;min-height:340px"
              :show-header="false"
            >
              <el-table-column label="标题" width="700">
                <template slot-scope="scope">
                  <span style="margin-left: 10px"
                    ><a
                      href="javascript:"
                      @click="toPosts(scope.$index, scope.row)"
                      >{{ scope.row.title }}</a
                    ></span
                  >
                </template>
              </el-table-column>
              <el-table-column label="日期">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.createTime | FormatDate("yyyy-MM-dd")
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[7, 10, 20, 30]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <v-footer></v-footer>
    </el-footer>
  </el-container>
</template>

<script>
import vHead from "@/views/home/header.vue";
import vFooter from "@/views/home/footer.vue";

import { listPages,findByType, findById } from "@/api/article";

import {findParMenuById} from "@/api/header";

/**时间格式化 */
import { parseTime } from "@/utils/pasedate";

export default {
  data() {
    return {
      tableData: [],
      parMenuList:[],
      current: 1,
      size: 7,
      total:0,
      menuId:'',
      menuName:''
    };
  },
  components: {
    vHead,
    vFooter,
  },
  created() {
    this.menuId=this.$route.params.menuId;
    //创建组件时调用查询
    this.getDataList();
    this.getParMenuList();

  },
  methods: {
    handleSizeChange(val) {
      this.size=val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.current=val;
      this.getDataList();
    },

    //获取列表信息
    async getDataList() {
      const { data: res } = await findByType(this.current, this.size,this.menuId);
      this.tableData = res.data.list;
      this.total = res.data.recordTotal;
      this.menuName=res.data.menuName;
    },

    //获取左侧导航列表
    async getParMenuList() {
      const { data: res } = await findParMenuById(this.menuId);
      console.log(res.data.list)
      this.parMenuList = res.data.list;
    },

    // 跳转到页面
    toPage(res) {
      this.menuId=res;
      this.getDataList();
      this.$router.push("/introduction/" + this.menuId);
    },

    //根据id查询,跳转到帖子
    async toPosts(index, row) {
      console.log(row.id);
      const { data: res } = await findById(row.id);
      if (200 == res.code) {
        console.log(res.data);
        this.$router.push({
          path: "/posts",
          query: res.data,
        });
      } else {
        this.$message.error("查找失败！");
      }
    },
  },
};
</script>

<style scoped>
/* 左栏样式 */
.left_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.left_content a {
  margin: 10px;
  text-decoration: none;
  font-weight: 500;
}
/* 右栏样式 */
.right_content {
  padding: 20px;
}
.right_content .right_top {
  margin-bottom: 20px;
  margin-left: 10px;
}
a {
  text-decoration: none;
}
.block{
  margin-top:30px;
  margin-left: 30px;
}

</style>